<!-- 人工盛期调查 -->
<template>
	<view class="container">


		<view class="example">
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms ref="baseForm" class="form-box" :model="baseFormData" labelWidth="105px">
				<uni-forms-item label="监测站点代码" required>
					<uni-easyinput v-model="baseFormData.name" disable />
				</uni-forms-item>
				<uni-forms-item label="任务名称" required>
					<uni-easyinput v-model="baseFormData.age" placeholder="请输入任务名称" />
				</uni-forms-item>
				<uni-forms-item label="行政区划">
					<uni-data-picker v-model="baseFormData.city" :localdata="cityData" popup-title="选择城市">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="经度" required>
					<uni-easyinput v-model="baseFormData.name" disable />
				</uni-forms-item>
				<uni-forms-item label="纬度" required>
					<uni-easyinput v-model="baseFormData.name" disable />
				</uni-forms-item>
				<uni-forms-item label="海拔">
					<uni-easyinput v-model="baseFormData.name" />
				</uni-forms-item>
				<uni-forms-item label="草地类型">
					<uni-data-picker v-model="baseFormData.city" :localdata="cityData" popup-title="选择城市">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="土壤类型">
					<uni-data-picker v-model="baseFormData.city" :localdata="cityData" popup-title="选择城市">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="地形">
					<uni-data-picker v-model="baseFormData.city" :localdata="cityData" popup-title="选择城市">
					</uni-data-picker>
				</uni-forms-item>

				<uni-forms-item label="坡度">
					<uni-easyinput v-model="baseFormData.name" />
				</uni-forms-item>


				<uni-forms-item label="坡向">
					<uni-data-picker v-model="baseFormData.city" :localdata="cityData" popup-title="选择城市">
					</uni-data-picker>
				</uni-forms-item>
				
				<uni-forms-item label="原生植被">
					<uni-data-checkbox v-model="baseFormData.sex" :localdata="ishas" />
				</uni-forms-item>
				<uni-forms-item label="围栏禁牧">
					<uni-data-checkbox v-model="baseFormData.sex" :localdata="ishas" />
				</uni-forms-item>
				
				<uni-forms-item label="工程类型">
					<uni-data-checkbox v-model="baseFormData.sex" :localdata="ishas" />
				</uni-forms-item>
				
				<uni-forms-item label="坡位">
					<uni-easyinput v-model="baseFormData.name" />
				</uni-forms-item>
				<uni-forms-item label="直径>5cm的砾石覆盖">
					<uni-data-checkbox v-model="baseFormData.sex" :localdata="gravel" />
				</uni-forms-item>
				<uni-forms-item label="覆土">
					<uni-data-checkbox v-model="baseFormData.sex" :localdata="gravel" />
				</uni-forms-item>
				<uni-forms-item label="水蚀">
					<uni-data-checkbox v-model="baseFormData.sex" :localdata="gravel" />
				</uni-forms-item>
				<uni-forms-item label="季节性积水">
					<uni-data-checkbox v-model="baseFormData.sex" :localdata="ishas" />
				</uni-forms-item>
		
				<uni-forms-item label="调查人员">
					<uni-easyinput v-model="baseFormData.name" />
				</uni-forms-item>
				<uni-forms-item label="调查时间">
					<uni-datetime-picker type="datetime" return-type="timestamp"
						v-model="baseFormData.datetimesingle" />
				</uni-forms-item>
				<uni-forms-item label="样地照片" class="uni-list list-pd">
					<view class="uni-list-cell cell-pd">
						<view class="uni-uploader">
							<view class="uni-uploader-body">
								<view class="uni-uploader__files">
									<block v-for="(image,index) in imageList" :key="index">
										<view class="uni-uploader__file">
											<image class="uni-uploader__img" :src="image" :data-src="image"
												@tap="previewImage"></image>
										</view>
									</block>
									<view class="uni-uploader__input-box">
										<view class="uni-uploader__input" @tap="chooseImage"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="备注">
					<uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入自我介绍" />
				</uni-forms-item>

			</uni-forms>
			<button type="primary" @click="submit('valiForm')">提交</button>

		</view>
		<view class="totopindex" @click="creatsquare">创建</br>样方</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				sourceTypeIndex: 2,
				sourceType: ['拍照', '相册', '拍照或相册'],
				sizeTypeIndex: 2,
				sizeType: ['压缩', '原图', '压缩或原图'],
				countIndex: 8,
				count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
				// 基础表单数据
				baseFormData: {
					name: '',
					age: '',
					introduction: '',
					sex: 2,
					hobby: [5],
					datetimesingle: 1627529992399,
					city: '',
					skills: 0
				},
				imageList: [],
				// 城市数据
				cityData: [{
					text: "北京",
					value: "10001",
				}, {
					text: "上海",
					value: "10002",
				}, {
					text: "深圳",
					value: "10004",
				}],
				gravel: [{
						value: 0,
						text: "多"
					},
					{
						value: 1,
						text: "少"
					},
					{
						value: 2,
						text: "无"
					},
				],


				// 单选数据源
				ishas: [{
					text: '有',
					value: 0
				}, {
					text: '无',
					value: 1
				}],

				// 校验表单数据
				valiFormData: {
					name: '',
					age: '',
					introduction: '',
				},
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}, {
							format: 'number',
							errorMessage: '年龄只能输入数字'
						}]
					}
				},

			}
		},
		computed: {

		},
		onLoad() {},
		onReady() {

		},
		methods: {
			onNavigationBarButtonTap(e) {
				uni.showToast({
					title: e.index === 0 ? "你点了分享按钮" : "你点了收藏按钮",
					icon: "none"
				})
			},
			creatsquare() {

			},
			async chooseImage() {
				// #ifdef APP-PLUS
				// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
				if (this.sourceTypeIndex !== 2) {
					let status = await this.checkPermission();
					if (status !== 1) {
						return;
					}
				}
				// #endif

				if (this.imageList.length === 9) {
					let isContinue = await this.isFullImg();
					console.log("是否继续?", isContinue);
					if (!isContinue) {
						return;
					}
				}
				uni.chooseImage({
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList
						.length : this.count[this.countIndex],
					success: (res) => {
						this.imageList = this.imageList.concat(res.tempFilePaths);
					},
					fail: (err) => {
						console.log("err: ", err);
						// #ifdef APP-PLUS
						if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
							this.checkPermission(err.code);
						}
						// #endif
						// #ifdef MP
						if (err.errMsg.indexOf('cancel') !== '-1') {
							return;
						}
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting['scope.camera'];
										break;
									case 1:
										authStatus = res.authSetting['scope.album'];
										break;
									case 2:
										authStatus = res.authSetting['scope.album'] && res
											.authSetting['scope.camera'];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},
			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.imageList
				})
			},



			submit(ref) {
				console.log(this.baseFormData);
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: absolute;
		width: 100vw;
		height: 100vh;

	}

	.example {
		position: absolute;
		width: 100%;
		height: 100vh;
		overflow-y: auto;

		background-color: #fff;
	}

	.form-box {
		padding: 15px;
	}

	.segmented-control {
		margin-bottom: 15px;
	}



	.totopindex {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background-color: #007aff;
		text-align: center;
		color: #fff;
		line-height: 45rpx;
		bottom: 120rpx;
		right: 20rpx;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}
</style>